<template>
    <div><el-button type="info" size="small" @click="goBack">返回</el-button></div>
    <el-form :model="newsForm" label-width="120px" :rules="newsFormRules" ref="newsFormRef">
            
            <el-form-item label="月份" prop="category">
              <el-select
                v-model="newsForm.category"
                placeholder=""
              >
                <el-option label="1月" :value="1" />
                <el-option label="2月" :value="2" />
                <el-option label="3月" :value="3" />
                <el-option label="4月" :value="4" />
                <el-option label="5月" :value="5" />
                <el-option label="6月" :value="6" />
                <el-option label="7月" :value="7" />
                <el-option label="8月" :value="8" />
                <el-option label="9月" :value="9" />
                <el-option label="10月" :value="10" />
                <el-option label="11月" :value="11" />
                <el-option label="12月" :value="12" />
              </el-select>
            </el-form-item>
            <el-form-item label="标题" prop="title">
              <el-input v-model="newsForm.title" />
            </el-form-item>
            <!-- <el-form-item label="封面" prop="cover">
                <el-upload
                class="avatar-uploader"
                :show-file-list="false"
                :auto-upload="false"
                :on-change="handleChangeCover"
              >
                <img
                  v-if="newsForm.cover"
                  :src="uploadAvatar"
                  class="cover"
                />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
            </el-form-item> -->
            <el-form-item label="阅读初始人数" prop="readNum">
              <el-input-number v-model="newsForm.readNum" />
            </el-form-item>
            <el-form-item label="内容" prop="content">
                <editor @event="handleChange" :content="newsForm.content" v-if="newsForm.content"></editor>
            </el-form-item>
            
            <el-form-item label="">
              <el-button type="primary" @click="submitForm()">更新新闻</el-button>
            </el-form-item>
          </el-form>
</template>

<script setup>
import {ref,reactive,onMounted,computed} from 'vue'
import editor from '../../components/editor/editor.vue'
import { Plus, } from "@element-plus/icons-vue";
import upload from '@/util/upload';
import { ElMessage } from "element-plus";
import { useRouter,useRoute } from "vue-router";
import axios from "axios";
import myUtil from "../../util/util.js"
const router = useRouter();
const route = useRoute();

onMounted(() => {
    getDetail();
})


const getDetail = async ()=> {
    const id = route.params.id;
    let res = await axios.get(`/adminapi/news/list/${id}`);
    Object.assign(newsForm,res.data.data);
    //console.log('newsForm',res.data)
}
const goBack = () => {
    router.back();
}
const newsFormRef = ref();
const newsForm = reactive({
    title:"",
    content:"",
    category:1, // 1最新动态  2典型案例  3通知公告
    readNum:10000,
    file:null,
    isPublish:0  // 0未发布  1已发布
})
const handleChange = (data)=> {
    newsForm.content = data;
    console.log(data);
}
const handleChangeCover = (file) => {
  console.log('file',file)
  console.log('URL.createObjectURL(file.raw)',URL.createObjectURL(file.raw))
  newsForm.cover = URL.createObjectURL(file.raw);
  newsForm.file = file.raw
//   uploadAvatar = 
}
const newsFormRules = reactive({
    title:[{ required: true, message: "请输入标题", trigger: "blur" }],
    content:[{ required: true, message: "请输入内容", trigger: "blur" }],
    category:[{ required: true, message: "请选择分类", trigger: "blur" }],
    readNum:[{ required: true, message: "请输入数量", trigger: "blur" }],
})
const uploadAvatar = computed(() => {
  return newsForm.cover.includes("blob") ? newsForm.cover : myUtil.devUrl + newsForm.cover;
})
const submitForm = () => {
    newsFormRef.value.validate(async(valid) => {
        if(valid) {
            console.log("newsForm",newsForm);
            const res = await upload("/adminapi/news/list",newsForm);
            if(res.data.code == 200) {
                ElMessage.success("修改成功");
                router.back()
            }else {
                ElMessage.error("修改失败");
            }
        }
    })
}
</script>

<style lang="scss" scoped>
.cover {
  width: 178px;
  height: 178px;
}
</style>